<!DOCTYPE html>
<html>
<title>webRTC</title>
<head>
    <style>
        html,body,#videoWarp{
            position: relative;
            margin:0;
            padding:0;
            width:100%;
            height:100%;
            overflow:hidden;
        }
        #video{
          position: absolute;
          z-index:1;
          left: 50%;
          top: 50%;
          height: 100%;
          width: auto;
          -webkit-transform: translate(-50%,-50%);
              -ms-transform: translate(-50%,-50%);
                  transform: translate(-50%,-50%);
        }
        #imgA{
            position:absolute;left:0;top:10%;z-index:2;width:20%;
        }
        #imgB{
            position:absolute;right:0;top:10%;z-index:2;width:20%;
        }
        #say{
            position:absolute;left:0;bottom:0;z-index:4;width:100%;
        }
    </style>
</head>
<body>
    <img id="imgA" src="file:///android_asset/Video/A.png"/>
    <img id="imgB" src="./B.png"/>
    <div id="say">::</div>
    <div id="videoWarp"><video id="video" autoplay></video></div>
</body>
<script>
        var localMediaStream = null;
        var imgA = document.getElementById('imgA');
        var imgB = document.getElementById('imgB');
        var video = document.getElementById('video');

        function init() {
            navigator.getMedia = ( navigator.getUserMedia ||
                navigator.webkitGetUserMedia ||
                navigator.mozGetUserMedia ||
                navigator.msGetUserMedia);
            navigator.getMedia({video: true}, function(stream) {
                  video.src = window.URL.createObjectURL(stream);
                  localMediaStream = stream;
                    say(video.src)
                }, function () {
                    say("err")
                    say(stream)
                });
        }
        function say(str) {document.getElementById("say").innerHTML = "<br/>:"+str}
        window.onload = init
	</script>
</html>
